<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/dianxin .css" />
    <link rel="stylesheet" href="./font_4003687_mi6g8a6ikt/iconfont.css" />
    <link rel="stylesheet" href="css/swiper.css" />
    <link rel="stylesheet" href="./css/snaxing.css" />
  </head>
  <body>
    <header>
      <a href="./智慧商城首页.html">
        <span><</span>
      </a>
      <p>商品详情页</p>
    </header>
    <div class="box">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./imgs/10097.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10098.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10099.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10100.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10101.jpg" width="100%" alt="" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </div>
      <div class="nav">
        <div class="lpl">
          <div class="lol">
            <span class="lp">￥</span>
            <span class="lp">0.01</span>
            <del><span class="lo">￥6699.00</span></del>
          </div>
          <div class="sun">
            <span>已售48件</span>
          </div>
        </div>
        <div class="son">
          <span
            >三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景
            悠雾紫 5G手机 游戏拍照旗舰机s23</span
          >
        </div>
      </div>
      <div class="text">
        <div class="sum">
          <p><i class="iconfont icon-duigou"></i>七天无理由退货</p>
          <p><i class="iconfont icon-duigou"></i>48小时发货</p>
        </div>
        <div class="som"><span>></span></div>
      </div>
      <div class="zfh">
        <div class="zheng">
          <div class="fei">
            <p>商品评价(5条)</p>
          </div>
          <div class="hong">
            <span>查看更多</span>
            <span>></span>
          </div>
        </div>
        <div class="zzy">
          <div class="zuo">
            <div class="yan">
              <img src="./imgs/10127.png" alt="" />
              <span>谷神不死</span>
            </div>
            <div class="zo">
              <span>质量很不错 挺喜欢的</span>
            </div>
            <div class="xl">
              <span>2023-03-21 15:01:35</span>
            </div>
          </div>
          <div class="zuo">
            <div class="yan">
              <img src="./imgs/10127.png" alt="" />
              <span>谷神不死</span>
            </div>
            <div class="zo">
              <span>又买了一台 真的很喜欢</span>
            </div>
            <div class="xl">
              <span>2023-03-21 15:02:52</span>
            </div>
          </div>
        </div>
      </div>
      <div class="web">
        <span>商品描述</span>
      </div>
      <img src="./imgs/10102.jpg" alt="" />
      <img src="./imgs/10103.jpg" alt="" />
      <img src="./imgs/10104.jpg" alt="" />
      <img src="./imgs/10105.jpg" alt="" />
      <img src="./imgs/10106.jpg" alt="" />
      <img src="./imgs/10107.jpg" alt="" />
      <img src="./imgs/10108.jpg" alt="" />
      <img src="./imgs/10109.jpg" alt="" />
      <img src="./imgs/10110.jpg" alt="" />
      <img src="./imgs/10111.jpg" alt="" />
      <img src="./imgs/10112.jpg" alt="" />
      <img src="./imgs/10113.jpg" alt="" />
      <img src="./imgs/10114.jpg" alt="" />
      <img src="./imgs/10115.jpg" alt="" />
      <img src="./imgs/10116.jpg" alt="" />
      <img src="./imgs/10117.jpg" alt="" />
      <img src="./imgs/10118.jpg" alt="" />
      <img src="./imgs/10119.jpg" alt="" />
      <img src="./imgs/10120.jpg" alt="" />
      <img src="./imgs/10121.jpg" alt="" />
      <img src="./imgs/10122.jpg" alt="" />
      <img src="./imgs/10123.jpg" alt="" />
      <img src="./imgs/10124.jpg" alt="" />
      <img src="./imgs/10125.jpg" alt="" />
      <img src="./imgs/10126.jpg" alt="" />
    </div>
    <footer>
      <div class="mask">
        <a href="./智慧商城首页.html">
          <i class="iconfont icon-shouye"></i>
          <p>首页</p>
        </a>
        <a href="./购物车.html">
          <i class="iconfont icon-gouwuchekong"></i>
          <p>购物车</p>
        </a>
      </div>
      <div class="main">
        <a href="#">
          <div class="min">加入购物车</div>
        </a>
        <a href="#">
          <div class="max">立即购买</div>
        </a>
      </div>
    </footer>
  </body>
  <script src="js/swiper.js"></script>
</html>
<script>
  var mySwiper = new Swiper('.swiper', {
    speed: 300,
    loop: true,
    autoplay: {
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination'
    },
    centeredSlides: true,
    observer: true,
    observeParents: true
  })
</script>
